<template>
  <nav-bar class="home" title="我的任务">
    <van-search
    v-model="value"
    placeholder="查询项目任务"
    @search="onSearch"
  />
    <num-card :list="list" @cardclick="cardClick" />
    <nav-title title="需要执行的任务" :hasOperation="true" @navclick="navclick"/>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(item, index) in infoList" :key="index">
            <info-list-card :infoList="item" :key="index" @info="info" @exec="exec"/>
        </van-cell>
      </van-list>
      <!-- <template v-for="(item,index) in infoList">
        <info-list-card :infoList="item" :key="index" @info="info" @exec="exec"/>
      </template> -->
  </nav-bar>
</template>

<script>
export default {
  name: "Home",
  components: {
    'nav-bar': () => import('components/Container'),
    'num-card': () => import('components/NumCard'),
    'nav-title': () => import('components/Title'),
    'info-list-card': () => import('components/ListCard')
  },
  data(){
    return {
      value: '',
      list: [{title: '未开始', value: 5}, {title:'进行中', value: 3},{title: '已完成',value:1000}],
      infoList: [
        {
          title: '机房巡检试运行',
          subTitle: '祝桥机房-七月运维机房巡检',
          date: '2021/7/1 0:00 - 2021/7/31 23:59',
          range: "每天一次",
          record: '无超时'
        },
        {
          title: '江镇社区森林存陆家宅光前入户改造工程',
          subTitle: '工程试试现场例行巡查',
          date: '2021/7/11 0:00 - 2021/10/31 23:59',
          range: "每周2次",
          record: '有超时'
        }
      ],
      loading: false,
      finished: false,
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    fetch() {
      this.Toast('我正在发请求')
      this.$API.getList().then(res => {
        console.log(res);
      })
    },
    cardClick(e) {
      console.log(e);
    },
    onSearch(value) {
      this.Toast(value)
    },
    navclick() {
      console.log('click');
    },
    info(e) {
      console.log(e);
    },
    exec(e) {
      console.log(e);
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.infoList.push({
          title: '机房巡检试运行',
          subTitle: '祝桥机房-七月运维机房巡检',
          date: '2021/7/1 0:00 - 2021/7/31 23:59',
          range: "每天一次",
          record: '无超时'
        },
        {
          title: '江镇社区森林存陆家宅光前入户改造工程',
          subTitle: '工程试试现场例行巡查',
          date: '2021/7/11 0:00 - 2021/10/31 23:59',
          range: "每周2次",
          record: '有超时'
        })
      // setTimeout(() => {
      //   console.log(123);
      // //   // 加载状态结束
        this.loading = false;
      // // //   // 数据全部加载完成
      //     this.finished = true;
      // }, 1000);
    },
  }
};
</script>
